<script setup lang="ts">
import { buildingDelApi, buildingGetApi } from '@/apis/park'
import type { DialogParamsI, ListParams } from '@/types'
import type { BuildingI } from '@/types/park'
import { ref } from 'vue'
import BuildingDialog from './components/BuildingDialog.vue'
import { ElMessage } from 'element-plus'

/**
 * 查询
 */
const getParams = ref<ListParams>({
  page: 1,
  pageSize: 8,
  name: '',
})
const list = ref<BuildingI[]>([])
const total = ref(0)
const getList = async () => {
  const res = await buildingGetApi(getParams.value)
  list.value = res.rows
  total.value = res.total
}
getList()
// 页码查询
const changePage = (page: number) => {
  getParams.value.page = page
  getList()
}
// 条数查询
const changePageSize = (pageSize: number) => {
  getParams.value.page = 1
  getParams.value.pageSize = pageSize
  getList()
}
// 条件查询
const search = () => {
  getParams.value.page = 1
  getParams.value.pageSize = 8
  getList()
}
/**
 * 添加、编辑、删除
 */
const dialogParams = ref<DialogParamsI<BuildingI>>({
  params: {
    id: undefined,
    name: '',
    floors: undefined,
    area: undefined,
    propertyFeePrice: undefined,
  },
  dialogVisible: false,
})
const openDialog = (row?: BuildingI) => {
  if (row?.id) {
    dialogParams.value.params = { ...row, status: undefined }
  }

  dialogParams.value.dialogVisible = true
}
const delBuilding = async (id: number) => {
  await buildingDelApi(id)
  ElMessage.success('删除成功~')
  getList()
}
</script>

<template>
  <div class="park-building-page">
    <!-- 头部 -->
    <header class="header-container">
      <span>楼宇名称:</span>
      <el-input
        placeholder="请输入楼宇名称"
        style="width: 220px; margin: 2px 20px 0 20px"
      />
      <el-button type="primary" style="margin-top: 2px" @click="search"
        >查询</el-button
      >
    </header>
    <!-- 按钮 -->
    <div class="btn-container">
      <el-button
        v-auth-btn="'park:building:add_edit'"
        type="primary"
        style="margin: 20px 0"
        @click="openDialog()"
        >添加楼宇</el-button
      >
    </div>
    <!-- 表格 -->
    <el-table style="height: 400px" :data="list">
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column label="楼宇名称" prop="name" />
      <el-table-column label="层数" prop="floors" />
      <el-table-column label="在管面积(m²)" prop="area" />
      <el-table-column label="物业费(m²)" prop="propertyFeePrice" />
      <el-table-column label="状态" prop="status" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" @click="openDialog(row)">编辑</el-button>
          <el-popconfirm title="确定删除吗?" @confirm="delBuilding(row.id)">
            <template #reference>
              <el-button type="text">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      layout="total, prev, pager, next, slot, jumper"
      :total="total"
      v-model:current-page="getParams.page"
      @current-change="changePage"
    >
      <el-select
        style="width: 95px"
        v-model="getParams.pageSize"
        @change="changePageSize"
      >
        <el-option label="8条/页" :value="8"></el-option>
        <el-option label="10条/页" :value="10"></el-option>
        <el-option label="15条/页" :value="15"></el-option>
      </el-select>
    </el-pagination>
    <!-- 弹层 -->
    <building-dialog v-model="dialogParams" @success="getList" />
  </div>
</template>

<style lang="scss" scoped>
.park-building-page {
  padding: 20px;
  background-color: #fff;

  .header-container {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  }

  ::v-deep(.el-table__header th) {
    background-color: rgb(237, 237, 237, 0.9);
    color: rgb(43, 37, 37);
    padding: 10px 0;
  }

  .el-pagination {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0px;
  }
}
</style>
